<div class="panel panel-default page-panel users-groups-page">
  <div class="panel panel-default page-panel">
    <div class="panel-heading clearfix">
      <div class="panel-title">
        <h3 class="pull-left" translate="usersAndGroups.title">Users and Groups</h3>
        <button ng-if="canManageUsers" type="button" class="btn btn-primary btn-sm pull-right" ng-disabled="!isAuthorized([userRoles.admin, userRoles.creator])" ng-click="onAddUserClick()">
          <span class="glyphicon glyphicon-plus"></span>
          <span>Add New User</span>
        </button>
      </div>
    </div>
  </div>
  <div class="panel-body"
      ng-style="{'height': (windowHeight - 111) + 'px', 'width': (windowWidth) + 'px'}" resize>
    <div class="list-content">
      <ul class="list-group checked-list-box">

        <li class="list-group-item header-list-group-item">
          <div class="user-name header">
            <span>User ID</span>
          </div>
          <div class="user-roles header">
            <span>Roles</span>
          </div>
          <div class="user-groups header">
            <span>Groups</span>
          </div>
        </li>

        <li class="list-group-item" ng-repeat="user in userList">
          <div class="user-name">
            <span>{{ canManageUsers ? user.id : user.name}}</span>
          </div>
          <div class="user-roles">
            <span>{{getRoles(user)}}</span>
          </div>
          <div class="user-groups">
            <span>{{user.groups.join(', ')}}</span>
          </div>
          <div ng-if="canManageUsers" class="list-actions">
            <i class="fa fa-edit fa-11x" ng-click="onEditUserClick(user.id);"></i>
            <i class="fa fa-trash fa-11x" ng-click="onDeleteUserClick(user.id);"></i>
          </div>
        </li>

        <div class="stage-libraries-loading">
          <div class="pipeline-home-loading" show-loading="fetching"></div>
        </div>

      </ul>
    </div>
  </div>
</div>
